<template>
  <div>
    <button @click="changeVisible" style="width: 3rem;background: orangered;height: 2rem;">点我</button>
    <popup :visible="VisibleSearchCustomer" position="right" class="searchReport-popup-search" :modal="false">
      <search-customer :search="searchCustomer" :method="comeBack" title-name="搜索客户123" :add-query-tag="addQueryTag" placeholder="请输入关键字" :btn-style="btnStyle">
        <div slot="search-main">
          <div v-show="showResult">
            <div class="z-query-tags" v-if="!noItems">
              <div class="bor-bot" v-for="item in searchItems" @click="addQueryTag(item)" style="text-overflow:ellipsis;">
                <span style="margin-left: 0.75rem;">{{item.accName}}</span>
              </div>
            </div>
            <div class="returnNull" style="clear:both;" v-if="noItems">
              <div class="returnNull2_img"></div>
              <div class="color_a5 font-30" style="margin:0.5rem 0 0.5rem 0;">暂无此客户，请重新输入或新建客户</div>
              <img  :src="imgUrl + '/static/images/newclient.png'" style="width:5rem;padding-left:0.5rem;" @click="newClient" />
            </div>
          </div>
        </div>
      </search-customer>
    </popup>
    <Loading :active.sync="loadingShow"></Loading>
  </div>
</template>

<style scoped>
  .z-query-tags-new{
    height: 2.4rem;
    background: orangered;
  }
  .btnStyle{
    background: orangered;
  }
</style>

<script>
  import Vue from 'vue';
  import searchCustomer from '../components/searchCustomer.vue';
  export default({
    name: "home",
    data(){
      return {
        msg: "123",
        showTitle: true,
        VisibleSearchCustomer: false,
        noItems: true,
        searchItems: [],
        searchContent: "",
        showResult: false,
        imgUrl: serverUrl,
        loadingShow: false,
        title: "搜索客户",
        btnStyle:{
          background: 'orangered',
          borderRadius: '0.9rem',
          fontSize: "1rem",
          fontFamily: "宋体"
        }
      }
    },
    ready(){

    },
    components: {searchCustomer},
    methods: {
      comeBack(){
        this.VisibleSearchCustomer = false;
        this.showTitle = true;
        this.showResult = false;
      },
      changeVisible(){
        this.VisibleSearchCustomer = true;
        this.showResult = false;
        this.showTitle = false;
      },
      addQueryTag(item){
        alert(JSON.stringify(item));
      },
      newClient(){
        alert("去新建客户");
      },
      searchCustomer(code){  //搜素客户
        var _this = this;
        //查询前先恢复默认
        _this.noItems = false;
        _this.showResult = false;
        _this.searchItems = [];
        _this.searchContent = "";
        _this.searchContent = code;
        _this.searchItems = [];
      }
    }
  });
</script>
